<template>
  <div id="app">
<h1>{{ count }} </h1>
<button v-on:click="add">+</button>
<Demo/>
<Demo/>
<Demo/>
  </div>
</template> 

<script>
//1.为什么需要组件化开发
//2.vue安装 npm i @vue/cli -g
//3.npx vue create
//4.组件的三部分
//5.data methods
//6. 组件的定义 组件的引入 组件的注册 组件的使用 网站 element
import Demo from './components/Demo.vue'
export default {
  name: 'App',
 data : function (){
  return{//响应式数据 当数据改变的时候，视图会跟着改变
    count:0
  }
 },
 methods:{
  add:function(){
  this.count++
  },addcount:function(){

  }
 },
 components : {
  Demo:Demo,
 }
}
</script>

<style>
#app {
 color: red;
}
</style>
